<template>
  <div class="EmergencyDetail">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/WarningActionList' }">预警任务</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyDetail-center">
      <TimeLine :activities="activities" :title="'预警事件流程'" :lineStyle="{ color: '#3561FD' }" color="#3561FD" />
      <div class="EmergencyDetail-add">
        <div class="EmergencyDetail-titel">
          <div class="EmergencyDetail-top">{{ task_data.mainTask.profession }}专业预警任务记录</div>
          <div class="InformationDetail-btn">
            <el-row>
              <el-button size="small" @click="AddFh">返回</el-button>
            </el-row>
          </div>
        </div>
        <div class="EmergencyDetail-zt">
          <el-collapse v-model="activeNames" ref="collapse">
            <el-collapse-item name="1">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize20">任务进度</div>
              </div>
              <div class="flexAround fontSize18 margin5-0" style="padding-top: 30px;">
                <div v-for="(item, index) in operateFlow" :key="index">
                  {{ item.operationName }}
                </div>
              </div>
              <el-steps :active="active" align-center>
                <el-step v-for="(item, i) in operateFlow" :key="i">
                  <template slot="icon">
                    <span class="yuandian1 ydBgcolor"></span>
                  </template>
                  <template slot="title">
                    <div class="fontWeight textNowrap">{{ item.operationTime }}</div>
                  </template>
                </el-step>
              </el-steps>
            </el-collapse-item>
            <el-collapse-item name="2">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize20">信息来源</div>
              </div>
              <div class="information_Sources_content">
                <el-descriptions
                  :labelStyle="{ width: '130px', fontSize: '16px', display: 'flex', 'justify-content': 'flex-end' }">
                  <el-descriptions-item label="预警通知单">
                    <router-link tag="span" class="link fontSize16"
                      :to="`NoticeDetail?id=${task_data.mainTask.noticeId}`">
                      {{ task_data.mainTask.noticeOrderName }}
                    </router-link>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize20">任务信息</div>
              </div>
              <div class="information_Sources_content">
                <el-descriptions
                  :labelStyle="{ width: '130px', display: 'flex', 'justify-content': 'flex-end', fontSize: '16px' }">
                  <el-descriptions-item label="任务名称">
                    {{ task_data.mainTask.taskName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="专业类型">
                    {{ task_data.mainTask.profession }}
                  </el-descriptions-item>
                  <el-descriptions-item label="任务类型">
                    {{ task_data.mainTask.taskType }}
                  </el-descriptions-item>
                  <el-descriptions-item label="派发单位/部门">
                    {{ task_data.mainTask.distributeDept }}
                  </el-descriptions-item>
                  <el-descriptions-item label="派发人">
                    {{ task_data.mainTask.fillUser }}
                  </el-descriptions-item>
                  <el-descriptions-item label="要求完成时间">
                    {{ task_data.mainTask.reqCompleteTime }}
                  </el-descriptions-item>
                  <el-descriptions-item label="责任单位/部门">
                    {{ task_data.mainTask.dutyUnit }}
                  </el-descriptions-item>
                  <el-descriptions-item label="责任人" span="2">
                    {{ task_data.mainTask.approvalUser }}
                  </el-descriptions-item>
                  <el-descriptions-item label="任务内容">
                    {{ task_data.mainTask.taskContent }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-collapse-item>
            <el-collapse-item :name="`${i + 4}`" v-for="(item, i) in task_data.feedbackInfoDetailVos" :key="i">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize20">任务反馈{{ i + 1 }}</div>
              </div>
              <div class="information_Sources_contents">
                <el-descriptions
                  :labelStyle="{ width: '128px', fontSize: '16px', display: 'flex', 'justify-content': 'flex-end' }"
                  :column="1" style="width: 37%">
                  <el-descriptions-item label="子任务名称">
                    {{ item.taskName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="记录时间">
                    {{ item.recordTime }}
                  </el-descriptions-item>
                  <el-descriptions-item label="定位地点">
                    <div style="position: relative;" v-show="item.position">
                      {{ item.position }}
                      <img src="../../../assets/img/location.png" alt=""
                        style="position: absolute;width: 20px; top: -3px;right: -35px;">
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item label=" 记录人">
                    {{ item.recorder }}
                  </el-descriptions-item>
                  <el-descriptions-item label="情况描述">
                    {{ item.description }}
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions :labelStyle="{ width: '74px', display: 'flex', 'justify-content': 'flex-end' }"
                  style="width: 60%">
                  <el-descriptions-item label="现场图片">
                    <div>
                      <img :src="img" alt="" v-for="(img, i) in item.sceneImage" :key="i" class="sceneImage" v-show="img">
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
import { getMission } from "@/api/EarlyWarningManagement/yjrw.js";
import { getOperationLog } from "@/api/EarlyWarningManagement/yjtzd.js";
import { loadFile } from "@/api/common.js";
import { getLeftFlowApi } from "@/api/EarlyWarningManagement/yjrb";
export default {
  name: "EmergencyDetail",
  components: { TimeLine },
  data() {
    return {
      activeNames: ["1", "2", "3"],
      activities: [
      ],
      task_data: {
        mainTask: {},
        subTaskDetailVoList: [],
        feedbackInfoDetailVos: []
      },
      active: 0,
      operateFlow: []
    };
  },
  created() {
    const { id } = this.$route.query;
    if (id) {
      this.getDetail(id);
    }
  },
  methods: {
    // 返回上一级
    AddFh() {
      this.$router.go(-1);
    },
    async getDetail(id) {
      try {
        const res = await getMission({ id });
        this.task_data = res;
        this.getOperateFlow(id);
        this.getWarningLeftFlow(res.mainTask.noticeId);
        const { feedbackInfoDetailVos } = res;
        if (feedbackInfoDetailVos.length) {
          feedbackInfoDetailVos.forEach(async (item, i) => {
            if (item.sceneImage) {
              const sceneImages = JSON.parse(item.sceneImage);
              const r = await Promise.all(sceneImages.map(async img => {
                try {
                  return await this.getImgFile(img.attachId);
                } catch (error) {
                  return "";
                }
              }));
              item.sceneImage = r;
            }
            this.activeNames.push(`${i + 4}`);
            // this.$set(this.activeNames, i + 3, `${i + 4}`)
          });
        }

        this.task_data.feedbackInfoDetailVos = feedbackInfoDetailVos;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取操作流程
    async getOperateFlow(id) {
      try {
        const res = await getOperationLog({ id });
        this.operateFlow = res;
        const active_index = res.findIndex(item => item.operationName == this.task_data.mainTask.flowStatus);
        this.active = active_index;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取图片地址
    getImgFile(id) {
      return new Promise((reslove, reject) => {
        loadFile({ id }).then(res => {
          // debugger;
          this.getBase64(res).then((item) => {
            // console.log(item);
            // debugger;
            reslove(item);
          });
        }).catch(err => {
          reject(err);
        });
      });
    },
    getBase64(data) {
      const blob = new Blob([data], { type: "image/jpg" });
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
      });
    },
    async getWarningLeftFlow(infoId) {
      try {
        const res = await getLeftFlowApi({ infoId });
        this.activities = res;
        console.log("时间轴", this.activities);
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style scoped lang="less">
:deep(.el-icon-arrow-right:before) {
  display: inline-block;
  content: "" !important;
  width: 10px;
  height: 10px;
  background: url("../../../assets/img/downArrow1.png") no-repeat center;
  background-size: 10px 10px;
  // transform: rotate(-180deg);
}

:deep(.el-collapse-item__arrow.is-active) {
  transform: rotate(180deg);
}

:deep(div::-webkit-scrollbar-track) {
  background: transparent;
}

:deep(.el-descriptions) {
  padding-top: 40px;

  :not(.is-bordered) .el-descriptions-item__cell {
    padding-bottom: 30px;
  }
}

:deep(.el-collapse) {
  border-top: 0;
}

:deep(.el-collapse-item__wrap) {
  border-bottom: 0;
}

:deep(.el-collapse-item__header.is-active) {
  border-bottom-color: #ebeef5;
}

.link {
  color: #3270ff;
  text-decoration: underline;
  cursor: pointer;
}

.sceneImage {
  width: 263px;
  height: 186px;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 10px;

  // &+.sceneImage {
  //   margin-left: 10px;
  // }
}

.yuandian1 {
  display: inline-block;
  background-color: #ccc;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.ydBgcolor {
  background-color: #246dfd;
  box-shadow: 0px 0px 8px 0px rgb(10, 99, 241);
}

.EmergencyDetail {
  width: 100%;
  height: 100%;

  .information_Sources_contents {
    width: 100%;
    display: flex;

    .information_Sources_ {
      width: 50%;

      .task_distribution_img {
        width: 100%;
        display: flex;
        // flex-direction: column;
        justify-content: space-around;

        .task_distribution_img_icon {
          width: 30%;
          height: 200px;
        }
      }
    }
  }

  :deep(.el-timeline) {
    width: 85%;
    margin-left: 35px;
    margin-top: 30px;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  .EmergencyDetail-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .textNowrap {
      color: #3561fd;
      font-weight: 400;
      font-size: 18px;
    }

    :deep(.el-step__line) {
      background-color: #3561fd;
    }

    :deep(.el-icon-arrow-right:before) {
      content: "\00AB";
      color: blue;
      font-size: 28px;
    }

    .EmergencyDetail-add {
      width: 83%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;

      // padding: 0 10px;
      .EmergencyDetail-titel {
        width: 98%;
        margin: 0 auto;
        position: relative;
        padding: 20px 0;
        // border-bottom: solid 1px #ccc;

        .EmergencyDetail-top {
          text-align: center;
          font-family: 微软雅黑;
          font-weight: bold;
          font-style: normal;
          font-size: 28px !important;
        }

        .InformationDetail-btn {
          position: absolute;
          right: 5px;
          bottom: 5px;
          text-align: right;
        }
      }

      .EmergencyDetail-zt {
        width: 98%;
        height: 80%;
        overflow-y: auto;
        margin: 0 auto;
        height: 87%;

        :deep(.el-button--text) {
          color: #606266;
          padding: 2px;
        }

        .EmergencyList-dialog-form-item {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .leftLine {
          width: 6px;
          height: 20px;
          background: #236dfe;
          border-radius: 4px;
          margin: auto 8px auto 0;
        }

        .task_distribution {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 30px 20px 30px;
        }

        .el-descriptions {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
